<template>
  <div class="flow-new__wrapper">
    <el-steps :space="268"
              :active="activeName"
              finish-status="success"
              process-status="finish"
              class="flow-new__step"
              align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="配置流程步骤"></el-step>
      <el-step title="配置完成"></el-step>
    </el-steps>
    <keep-alive>
      <component :is="activeComp"
                 v-show="activeName < 2"
                 class="flow-new__middle"
                 ref="current"
      ></component>
    </keep-alive>
    <!--第一步按钮-->
    <div class="flow-new__footer" v-if="activeName === 0">
      <el-button size="mini"
                 class="primary_btn"
                 @click.stop="cannel">取消</el-button>
      <el-button size="mini" class="primary_btn" type="primary" @click.stop="create">创建并继续</el-button>
    </div>
    <!--第二步按钮-->
    <div class="flow-new__footer" v-if="activeName === 1">
      <el-button size="mini" class="primary_btn" @click.stop="finish">稍后配置</el-button>
      <el-button size="mini" class="primary_btn" type="primary" @click.stop="next">下一步</el-button>
    </div>
    <!--第三步按钮-->
    <div v-if="activeName === 2" class="flow-new__complete">
      <i class="el-icon-success"></i>
      <p>新的工单流程成功配置</p>
      <div>请在［模版详情］中进行修改或进行对接配置</div>
      <el-button size="mini" class="primary_btn" type="primary" @click.stop="finish">完成</el-button>
    </div>
  </div>
</template>

<script>
  import baseInfo from './flowConfig/baseInfo'
  import flowConfig from './flowConfig/index'
  export default {
    name: 'new-flow',
    data () {
      return {
        activeName: 1, // 当前步骤
        activeComp: 'baseInfo' // 当前激活的组件
      }
    },
    provide: function () {
      return {
        busType: 'newFlow'
      }
    },
    components: {
      baseInfo,
      flowConfig
    },
    methods: {
      cannel () {
        // 取消，返回列表页
        // 加随机数，解决页面不跳转问题
        this.$router.push({path: '/index/newConfig/businessConfig/busConfigList?' + Math.random()})
      },
      create () {
        // 创建工单，进入配置流程步骤
        let data = this.$refs.current.create()
        if (data.success) {
          return this.$store.dispatch('addBusinessFlow', data.data).then((res) => {
            if (res && res.success) {
              this.activeName = 1
              this.activeComp = flowConfig
              this.$nextTick(() => {
                this.$refs.current.init(res.data._id)
              })
            }
          })
        }
      },
      next () {
        // 流转到完成页
        this.activeName = 2
        this.activeComp = ''
      },
      finish () {
        // 完成，返回列表页
        // 加随机数，解决页面不跳转问题
        this.$router.push({path: '/index/newConfig/businessConfig/busConfigList?' + Math.random()})
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.activeComp = 'baseInfo'
        vm.activeName = 0
        vm.$nextTick(() => {
          vm.$refs.current.reset()
        })
      })
    }
  }
</script>

<style scoped lang='stylus'>
  @import '../../../../assets/common.styl'
  .flow-new__wrapper
    height 100%
    padding-top 30px
    box-sizing border-box
    overflow-y hidden
  .flow-new__step
    width 804px
    margin auto
  .flow-new__middle
    height calc(100% - 107px)
    overflow-y auto
  .flow-new__complete
    padding-top 60px
    text-align center
    i
      color $cf-color2
      font-size 80px
    p
      font-size 14px
      padding 30px 0 10px
    div
      color: $cf-gray5
      padding-bottom 30px
  .flow-new__footer
    border-top 1px solid rgba(232,232,232,1)
    text-align right
    padding 10px 20px
    box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
</style>
